<template>
  <div class="content" :class="{'tophide' : arrowShow}" v-if="files.current">
    <grid-layout :layout.sync="layout" :col-num="24" :row-height="30" :is-draggable="false" :is-resizable="false" :is-mirrored="false" :vertical-compact="false" :margin="[10, 10]" :use-css-transforms="true">
      <grid-item v-for="(item,index) in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i" :ref="components[index].id+'_grid'" :style="components[index].style">
        <component :is="components[index].name" :file="files.current" :data="components[index]" :index="index" :view="false" :ref="components[index].id" @updateResult="updateResult" :pageType="pageType"></component>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';

// 基础组件
import textItem from '@/components/custom/Middle/Basic/TextItem';
import inputItem from '@/components/custom/Middle/Basic/InputItem';
import selectItem from '@/components/custom/Middle/Basic/SelectItem';
import switchItem from '@/components/custom/Middle/Basic/SwitchItem';
import datepickerItem from '@/components/custom/Middle/Basic/DatepickerItem';
import buttonItem from '@/components/custom/Middle/Basic/ButtonItem';
import checkboxItem from '@/components/custom/Middle/Basic/CheckboxItem';
import radioItem from '@/components/custom/Middle/Basic/RadioItem';
import checkboxgroupItem from '@/components/custom/Middle/Basic/CheckboxgroupItem';
import radiogroupItem from '@/components/custom/Middle/Basic/RadiogroupItem';
import rateItem from '@/components/custom/Middle/Basic/RateItem';
import tableItem from '@/components/custom/Middle/Basic/TableItem';

// 高级组件
import sectionItem from '@/components/custom/Middle/Senior/SectionItem';
import delimitItem from '@/components/custom/Middle/Senior/DelimitItem';

let self = null;
export default {
  name: "MarkContent",
  data() {
    return {
      isPrevie: false, // 预览 true 编辑 false
      vueEventArr: [{
        name: 'initFile',
        h: this.initFile
      }, {
        name: 'saveBefore',
        h: this.saveBefore
      }, {
        name: 'nextTask',
        h: this.nextTask
      }, {
        name: 'preTask',
        h: this.preTask
      },]
    };
  },
  props: {
    files: {
      type: Object,
      default: () => ({})
    },
    base: {
      type: Object,
      default: () => ({})
    },
    history: {
      type: Object,
      default: () => ({})
    },
    markContent: {
      type: Object,
      default: () => ({})
    },
    pageType: {
      type: String,
      default: "mark"
    },
    componentsInfo: {
      type: Object,
      default: {}
    },
    arrowShow: {}
  },
  created() {
    self = this;
    // vue组件通信事件绑定
    this.vueCustomEvent('on');
  },
  beforeDestroy() {
    this.vueCustomEvent('off')
  },
  mounted() {
  },
  watch: {
    componentsInfo: {
      handler(c) {
        this.components = c.components
        this.layout = c.layout
      },
      immediate: true
    }
  },
  computed: {
  },
  methods: {
    saveBefore(currentfile) {
      let components = this.components
      let result = {} // 保存的数据
      for (let i = 0; i < components.length; i++) {
        let component = components[i]
        // 先校验
        if (!this.checkComponentValue(component)) return;

        result[component.id] = {
          value: component.value
        }
      }
      // 将保存的结果调换files.current.result
      this.files.current.result = result

      this.$parent.saveCheckType = 1; // 校验成功 修改父组件校验成功状态值
    },
    checkComponentValue(component) {
      let defaultMsg = {
        required: '内容不能为空',
        strMin: '长度不能少于',
        numMin: '数值不能小于',
        strMax: '长度不能大于',
        numMax: '数值不能大于',
        type: '数据类型错误',
        pattern: '内容不符合要求'
      }
      let { valid, value, componentType } = component
      if (componentType === 0) { // 基础组件
        if (this.Utils.getDataType(valid) === 'array') { // 只有数组类型才进行校验 这里只处理定义好的规则校验； 不符合我们定义规则的 不做任何处理
          for (let i = 0; i < valid.length; i++) {
            let valids = valid[i]
            if (valids.required !== undefined && !value) {
              this.$Message.warning(valids.message || defaultMsg.required);// 校验是否必填
              return false;
            }
            if (valids.type !== undefined && this.Utils.getDataType(value) !== valids.type) { // [object Array]
              this.$Message.warning(valids.message || defaultMsg.type); // 校验value数据 类型
              return false;
            }
            if (valids.min !== undefined && (typeof value === 'string' || typeof value === 'number')) { // 数字 字符串两种类型
              if (typeof value === 'string' && value.length < valids.min) {
                this.$Message.warning(valids.message || defaultMsg.strMin + valids.min + '字符');
                return false;
              }
              if (typeof value === 'number' && value < valids.min) {
                this.$Message.warning(valids.message || defaultMsg.numMin + valids);
                return false;
              }
            }
            if (valids.max !== undefined && (typeof value === 'string' || typeof value === 'number')) {
              if (typeof value === 'string' && value.length > valids.max) {
                this.$Message.warning(valids.message || defaultMsg.strMax + valids.max + '字符');
                return false;
              }
              if (typeof value === 'number' && value > valids.max) {
                this.$Message.warning(valids.message || defaultMsg.numMax + valids);
                return false;
              }
            }
            if (valids.pattern !== undefined && !RegExp(valids).test(value)) {
              this.$Message.warning(valids.message || defaultMsg.pattern);
              return false;
            }
          }
        }
      } else if (componentType === 1) { // 高级组件
        let { validate } = this.$refs[component.id]
        if (this.Utils.getDataType(validate) === 'function' && !validate()) {
          return false;
        }
      }
      return true;
    },
    vueCustomEvent(type) {
      this.vueEventArr.forEach(ev => {
        if (!ev.name || !ev.h) return;
        this.$bus[`$${type}`](ev.name, ev.h);
      })
    },
    nextTask() {

    },
    preTask() {

    },
    // 更新结果
    updateResult(data) {
      let item = this.components[data.index];
      item.value = data.value;
    },
  },
  filters: {

  },
  components: {
    textItem,
    inputItem,
    switchItem,
    selectItem,
    datepickerItem,
    buttonItem,
    checkboxItem,
    radioItem,
    checkboxgroupItem,
    radiogroupItem,
    rateItem,
    tableItem,

    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
};
</script>

<style lang="less" scoped>
.content {
  min-width: 1024px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 0;
  overflow: hidden;
  transition: top 0.4s linear;
  -webkit-transition: top 0.4s linear;
}
.tophide {
  top: 50px;
}
</style>
